<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/view/jsp/public/include.base.jsp" %>
<!DOCTYPE html>

<!--[if IE 8]><html class="ie8"> <![endif]-->
<!--[if IE 9]><html class="ie9 gt-ie8"> <![endif]-->
<!--[if gt IE 9]><html class="gt-ie8 gt-ie9 not-ie"> <![endif]-->
<!--[if !IE]> --><html lang="en"><!-- <![endif]-->
<head>
    <title>霸屏互动运营系统</title>
    <jsp:include page="/WEB-INF/view/jsp/public/include.inc.top.jsp" flush="true"/>
    <style type="text/css">
        .captcha {
            margin-top: 10px;
        }
    </style>
</head>

<body class="theme-default page-signup-alt">

<div class="signup-header">
    <a href="index.html" class="logo">
        <div class="demo-logo"><img src="${pageContext.request.contextPath}/image/logo/logo.png"
                                    style="margin-top: -4px;width:40px;height:40px;"></div>
        &nbsp;
        <strong>霸屏互动</strong>运营系统
    </a> <!-- / .logo -->
    <a href="${pageContext.request.contextPath}/auth/login" class="btn btn-primary">登录</a>
</div>
<!-- / .header -->

<h1 class="form-header">注册帐号</h1>


<!-- Form -->
<form action="${pageContext.request.contextPath}/auth/register" method="post" id="registerForm" class="panel">
    <div class="form-group">
        <input type="text" name="barName" id="barName" class="form-control input-lg" placeholder="酒吧名称">
    </div>

    <div class="form-group">
        <select name="province" id="province" class="form-control input-lg" onchange="queryCity()">
            <option value="">请选择所在省份</option>
            <c:forEach items="${regions}" var="region">
                <option value="${region.id}">${region.name}</option>
            </c:forEach>
        </select>
    </div>

    <div class="form-group">
        <select name="city" id="city" class="form-control input-lg">
            <option value="">请选择所在市区</option>
        </select>
    </div>

    <div class="form-group">
        <input type="text" name="phone" id="phone" class="form-control input-lg" placeholder="手机号">
    </div>


    <div class="form-group">
        <input type="password" name="password" id="password" class="form-control input-lg" placeholder="密码">
    </div>

    <div class="form-group">
        <input type="password" name="confirmPassword" id="confirmPassword" class="form-control input-lg"
               placeholder="确认密码">
    </div>

    <div class="form-group">
        <div class="row">
            <div class=" col-sm-8"><input type="text" name="captcha" id="captcha" class="form-control input-lg"
                                          placeholder="验证码"></div>
            <div class=" col-sm-4"><img class="captcha" title="点击刷新"
                                        src="${pageContext.request.contextPath}/auth/getCaptcha"
                                        onclick="getCaptcha(this)"/></div>
        </div>
    </div>

    <div class="form-group" style="margin-top: 20px;margin-bottom: 20px;">
        <label class="checkbox-inline">
            <input type="checkbox" class="px" id="registerConfirm" onchange="agree()"/>
            <span class="lbl">我同意 <a href="#" target="_blank">用户协议</a></span>
        </label>
    </div>

    <div class="form-actions">
        <input type="submit" disabled="disabled" value="注册帐号" class="btn btn-primary btn-lg btn-block disabled">
    </div>
</form>
<!-- / Form -->

<jsp:include page="/WEB-INF/view/jsp/public/include.inc.bottom.jsp" flush="true"/>
<script type="text/javascript">
    function getCaptcha(obj) {
        $('#captcha').val('');
        obj.src = obj.src + "?" + new Date();
    }

    function agree() {
        if ($('#registerConfirm').is(':checked')) {
            $('#registerForm input[type="submit"]').removeAttr("disabled");
            $('#registerForm input[type="submit"]').removeClass("disabled");
        } else {
            $('#registerForm input[type="submit"]').attr("disabled", "disabled");
            $('#registerForm input[type="submit"]').addClass("disabled");
        }
    }

    function queryCity() {
        var pid = $('#province').val();
        if(pid === "") {
            $('#city').empty();
            $('#city').append('<option value="">请选择所在市区</option>');
            return;
        }
        $.ajax({
            url: contextPath + '/region/' + pid,
            type: 'get',
            success: function (response) {
                if (response.meta.success) {
                    $('#city').empty();
                    $('#city').append('<option value="">请选择所在市区</option>');
                    $.each(response.data, function (index, item) {
                        if (response.data.length == 1)
                            $('#city').append('<option value="' + item.id + '" selected>' + item.name + '</option>');
                        else
                            $('#city').append('<option value="' + item.id + '">' + item.name + '</option>');
                    });
                }
            },
            error: function () {

            }
        });
    }

    // 手机号码验证
    jQuery.validator.addMethod("isMobile", function (value, element) {
        var length = value.length;
        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写您的手机号码");

    window.PixelAdmin.start([
        function () {
            $("#registerForm").validate({
                ignore: '.ignore',
                focusInvalid: false,
                rules: {
                    'barName': {
                        required: true,
                        remote: {
                            url: contextPath + "/auth/check",
                            type: "post",
                            dataType: "json",
                            data: {
                                key: 'barName',
                                value: function () {
                                    return $.trim($('#barName').val());
                                }
                            }
                        }
                    },
                    'province': {
                        required: true
                    },
                    'city': {
                        required: true
                    },
                    'phone': {
                        required: true,
                        isMobile: true,
                        remote: {
                            url: contextPath + "/auth/check",
                            type: "post",
                            dataType: "json",
                            data: {
                                key: 'phone',
                                value: function () {
                                    return $.trim($('#phone').val());
                                }
                            }
                        }
                    },

                    'password': {
                        required: true,
                        minlength: 6,
                        maxlength: 16
                    },
                    'confirmPassword': {
                        required: true,
                        minlength: 6,
                        maxlength: 16,
                        equalTo: '#password'
                    },
                    'captcha': {
                        required: true,
                        remote: {
                            url: contextPath + "/auth/check",
                            type: "post",
                            dataType: "json",
                            data: {
                                key: 'captcha',
                                value: function () {
                                    return $.trim($('#captcha').val());
                                }
                            }
                        }
                    }
                },
                messages: {
                    'barName': {
                        required: '请输入酒吧名称',
                        remote: '该酒吧名称已存在'
                    },

                    'province': {
                        required: '请选择省份'
                    },
                    'city': {
                        required: '请选择市区'
                    },
                    'phone': {
                        required: '请输入手机号码',
                        remote: '该手机号码已存在'
                    },
                    'password': {
                        required: '请输入密码',
                        minlength: '密码长度为6-16个字符，且区分大小写',
                        maxlength: '密码长度为6-16个字符，且区分大小写'
                    }
                    ,
                    'confirmPassword': {
                        required: '请输入密码',
                        minlength: '密码长度为6-16个字符，且区分大小写',
                        maxlength: '密码长度为6-16个字符，且区分大小写',
                        equalTo: "两次密码输入不一致"
                    },
                    'captcha': {
                        required: '请填写验证码',
                        remote: '验证码不一致'
                    }
                },
                submitHandler: function (form) {
                    $('#registerForm input[type="submit"]').attr("disabled", "disabled");
                    $('#registerForm input[type="submit"]').addClass("disabled");
                    form.submit();
                }
            });
        }
    ]);
</script>

</body>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?086cb982114797d6d170557274d1956d";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</html>
